<template>
  <view class="home-page">
    <!-- 发布弹框组件 -->
    <PublishModal ref="publishModalRef" />
    
    <!-- 头部 -->
<header class="header">
  <image class="header-image" src="/static/header-bg.png" mode="aspectFill"></image>
  <view class="header-content">
    <image class="logo-image" src="/static/logo.png" mode="aspectFit"></image>
  </view>
</header>

<!-- 轮播图区域 -->
<view class="swiper-section">
  <swiper 
    class="matching-swiper" 
    :current="currentSlide"
    indicator-dots="false"
    :interval="5000"
    :duration="500"
    @change="onSwiperChange"
  >
    <swiper-item v-for="(slide, index) in slides" :key="slide.id">
      <view class="swiper-item matching-card">
        <image 
          class="banner-image" 
          :src="slide.imageUrl" 
          mode="aspectFill"
        ></image>
      </view>
    </swiper-item>
  </swiper>
</view>
    
<!-- 主要功能区域 -->
<view class="main-features">

  <view class="bottom-cards">
    <!-- 朋友圈卡片 -->
    <view class="feature-card moment-card" @click="goToDynamic">
      <image 
        class="card-image" 
        src="/static/moment-image.png" 
        mode="aspectFit"
      ></image>
    </view>
    
    <!-- 短剧卡片 -->
    <view class="feature-card drama-card" @click="goToDrama">
      <image 
        class="card-image" 
        src="/static/drama-image.png" 
        mode="aspectFit"
      ></image>
    </view>
  </view>
</view>
    
    <!-- 标签页 -->
    <view class="tab-section">
      <view class="tab-buttons">
        <view 
          class="tab-button" 
          :class="{ 'tab-active': currentTab === 'updates' }"
          @click="switchTab('updates')"
        >
          <text>最新动态</text>
        </view>
        <view 
          class="tab-button" 
          :class="{ 'tab-active': currentTab === 'buddies' }"
          @click="switchTab('buddies')"
        >
          <text>最新搭子</text>
        </view>
</view>
      
      <!-- 使用社区列表组件 -->
      <CommunityList ref="communityListRef" />
      
    </view>
    
    <!-- 自定义底部导航 -->
    <CustomTabBar />
  </view>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance, onUnmounted } from 'vue';
import { onPullDownRefresh } from '@dcloudio/uni-app'
import { showAuthModal } from '@/sheep/hooks/useModal'
// import BannerUtil from '@/sheep/api/index/banner'
import CommunityList from './components/CommunityList.vue'
import PublishModal from '../components/PublishModal.vue'
import CustomTabBar from '../components/CustomTabBar.vue'

// 响应式数据
const currentTab = ref('updates')
const currentSlide = ref(0)
const slides = ref([])
const communityListRef = ref(null)
const publishModalRef = ref(null)
const isRefreshing = ref(false)


// 获取当前页面实例
const instance = getCurrentInstance()

// 手动切换轮播
const goToSlide = (index) => {
  currentSlide.value = index
}

// swiper 组件变化监听
const onSwiperChange = (e) => {
  currentSlide.value = e.detail.current
}

// 切换标签页
const switchTab = (tabName) => {
  if (tabName === 'updates') {
    // 最新动态页面逻辑
    currentTab.value = 'updates'
  } else if (tabName === 'buddies') {
    // 最新搭子页面逻辑
    currentTab.value = 'buddies'
  }
}

// 其他方法
const navigateTo = (page) => {
  console.log(`跳转到 ${page} 页面`)
  // uni.navigateTo({
  //   url: `/pages/${page}/${page}`
  // })
}

const followUser = (userId) => {
  console.log(`关注用户 ${userId}`)
  uni.showToast({
    title: '关注成功',
    icon: 'success'
  })
}

// 跳转到登录页面
const goToLogin = () => {
  showAuthModal('smsLogin') 
}

// 跳转到朋友圈/动态页面
const goToDynamic = () => {
  uni.navigateTo({
    url: '/pages/dynamic/index'
  })
}

// 跳转到短剧页面
const goToDrama = () => {
  uni.navigateTo({
    url: '/pages/drama/index'
  })
}

// 获取轮播图数据的函数
const getBannerData = async () => {
  const BannerUtil = (await import('@/sheep/api/index/banner')).default
  const res = await BannerUtil.getBannerList()
  slides.value = res?.data?.map(item => ({
    id: item.id,
    imageUrl: item.imageUrl
  })) || []
}

// 刷新所有数据
const refreshAllData = async () => {
  try {
    isRefreshing.value = true
    
    // 1. 刷新轮播图数据
    await getBannerData()
    
    // 2. 刷新动态列表（重置到第一页）
    if (communityListRef.value && communityListRef.value.refresh) {
      await communityListRef.value.refresh()
    }
    
  } catch (error) {
    console.error('刷新数据失败:', error)
    uni.showToast({
      title: '刷新失败',
      icon: 'none'
    })
  } finally {
    // 停止下拉刷新动画
    uni.stopPullDownRefresh()
    isRefreshing.value = false
  }
}

// 下拉刷新生命周期钩子
onPullDownRefresh(() => {
  refreshAllData()
})


// 页面加载时执行
onMounted(() => {
  getBannerData()
  
  // 监听全局事件，显示发布弹框
  uni.$on('showPublishModal', () => {
    console.log('首页收到显示发布弹框事件')
    if (publishModalRef.value) {
      publishModalRef.value.showModal()
    } else {
      console.warn('首页发布弹框组件引用为空')
    }
  })
})

onUnmounted(() => {
  // 移除事件监听
  uni.$off('showPublishModal')
})

</script>

<style scoped>
.home-page {
  padding-bottom: calc(98rpx + env(safe-area-inset-bottom));
  padding-bottom: calc(98rpx + constant(safe-area-inset-bottom));
  background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
  min-height: 100vh;
  height: auto;
}

.status-bar {
  height: 44rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 32rpx;
  background: #fff;
}

.time {
  font-size: 32rpx;
  font-weight: 600;
  color: #000;
}

.status-icons {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.signal-icon, .wifi-icon, .battery-icon {
  font-size: 24rpx;
}

/* 头部区域 */
.header {
  position: relative;
  padding: 32rpx 0 48rpx;
  background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 50%, #f0e6ff 100%);
  overflow: hidden;
  height: 280rpx; 
}

.header-image {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}


.header-content {
  position: relative;
  z-index: 2;
  padding: 20rpx 40rpx;
}

.logo-image {
  width: 200rpx; 
  height: 80rpx; 
}

/* 轮播图区域 */
.swiper-section {
  margin: -200rpx 17rpx 32rpx;
  position: relative;
  z-index: 1;
}

.matching-swiper {
  height: 334rpx;
  border-radius: 16rpx;
  overflow: hidden;
}

.swiper-item {
  width: 100%;
  height: 100%;
  border-radius: 16rpx;
}

.banner-image {
  width: 100%;
  height: 100%;
  border-radius: 16rpx;
}

.indicator {
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.indicator.active {
  background: #ff6b9d;
  width: 24rpx;
  border-radius: 6rpx;
}

/* 主要功能区域 */
.main-features {
   padding: 10rpx 20rpx;
   margin-top: -40rpx;
}

.feature-card {
  width: 48%;
  height: 200rpx;
  border-radius: 16rpx;
  overflow: hidden;
}

.card-image {
  width: 100%;
  height: 100%;
  border-radius: 16rpx;
}

.matching-card {
  background: linear-gradient(135deg, #fff7ed 0%, #f0f9ff 50%, #fdf2f8 100%);
  padding: 0;
  position: relative;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  width: 100%;
  height: 100%;
}

.card-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.text-section {
  flex: 1;
}

.card-title {
  font-size: 36rpx;
  font-weight: 700;
  color: #000;
  margin-bottom: 12rpx;
  display: block;
}

.card-subtitle {
  background: #000;
  color: #fff;
  padding: 8rpx 16rpx;
  border-radius: 12rpx;
  font-size: 24rpx;
  margin: 16rpx 0;
  display: inline-block;
  position: relative;
}

.card-subtitle::before {
  content: '⭐';
  margin-right: 8rpx;
}

.card-subtitle::after {
  content: '⭐';
  margin-left: 8rpx;
}

.image-section {
  position: relative;
  width: 200rpx;
  height: 150rpx;
}

.main-image-area {
  width: 100%;
  height: 100%;
background: linear-gradient(135deg, #ffd1dc, #ffe4e6);
  border-radius: 12rpx;
  position: relative;
  overflow: hidden;
  border: 2rpx solid #ffd54f;
}

.woman-image {
  position: absolute;
  bottom: 0;
  right: 10rpx;
  width: 120rpx;
  height: 100rpx;
  background: linear-gradient(135deg, #f4c4c4, #f7d1d1);
  border-radius: 8rpx 8rpx 0 0;
}

.smiley-icon {
  position: absolute;
  top: 8rpx;
  right: 8rpx;
  font-size: 24rpx;
  background: #ffd54f;
  border-radius: 50%;
  width: 32rpx;
  height: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-overlay {
  position: absolute;
  bottom: -8rpx;
  right: -8rpx;
  width: 60rpx;
  height: 60rpx;
  background: #333;
  border-radius: 50%;
  border: 3rpx solid #fff;
}

.boy-avatar {
  width: 100%;
  height: 100%;
  background: #666;
  border-radius: 50%;
  position: relative;
}

.boy-avatar::before {
  content: '😉';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 32rpx;
}

.bottom-cards {
  display: flex;
  justify-content: space-between;
  gap: 40rpx;
}

/* 标签页 */
.tab-section {
  padding: 0 20rpx;
  margin-top: -15rpx;
}

.tab-buttons {
  display: flex;
  align-items: flex-end;
  margin-bottom: 20rpx;
}

.tab-button {
  font-size: 28rpx; 
  color: #888888; 
  font-weight: normal; 
  padding: 15rpx 20rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tab-button.tab-active {
  font-size: 36rpx; 
  color: #000000; 
  font-weight: bold;
}

.tab-button.tab-active::after {
  content: '';
  position: absolute;
  bottom: -10rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 4rpx;
  background: #ff6b9d;
  border-radius: 2rpx;
}

.community-container {
  padding: 0rpx 0rpx 120rpx;;
}

.community-list {
  padding: 0 0rpx;
}

.community-item {
  margin-bottom: 30rpx;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
}

.user-info-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 15rpx;
}

.user-info {
  display: flex;
  align-items: center;
}

.avatar {
  width: 60rpx;
  height: 60rpx;
  background-color: #f0f0f0;
  border-radius: 50%;
  margin-right: 15rpx;
}

.username {
  font-size: 28rpx;
  font-weight: 500;
}

.publish-time {
  font-size: 22rpx;
  color: #999;
  /* 让时间显示在右上角 */
  align-self: flex-start;
}

.content {
  font-size: 28rpx;
  line-height: 44rpx;
  margin-bottom: 20rpx;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


.image-list image {
  width: 220rpx;
  height: 220rpx;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
}

.video-list video {
  width: 100%;
  height: 400rpx;
  margin-bottom: 10rpx;
  border-radius: 10rpx;
}

.publish-time {
  font-size: 22rpx;
  color: #999;
  /* display: block; */
  /* margin-top: 15rpx; */
}

.no-more-data {
  text-align: center;
  padding: 30rpx 0;
  color: #999;
  font-size: 24rpx;
  background-color: #f8f9fa;
  border-radius: 8rpx;
  /* 媒体容器 */
  .media-container {
    margin: 20rpx 0;
  }
  
  /* 视频样式 */
  .video-container {
    width: 100%;
  }
  
  .wechat-video {
    width: 100%;
    height: 400rpx;
    border-radius: 8rpx;
    background-color: #000;
  }
  
  /* 微信朋友圈图片网格布局 */
  .wechat-image-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4rpx;
    width: 100%;
  }
  
  /* 单张图片 - 大图显示 */
  .wechat-image-grid.single-image .wechat-image {
    width: 100%;
    height: 400rpx;
    border-radius: 8rpx;
  }
  
  /* 两张图片 - 并排显示 */
  .wechat-image-grid.double-image {
    display: flex;
    flex-wrap: nowrap;
    gap: 4rpx;
    width: 100%;
  }
  
  .wechat-image-grid.double-image .wechat-image {
    flex: 1;
    height: 200rpx;
    border-radius: 8rpx;
    min-width: 0;
  }
  
  /* 三张图片 - 水平平均分布一行展示 */
  .wechat-image-grid.triple-image {
    display: flex;
    flex-wrap: nowrap;
    gap: 4rpx;
    width: 100%;
  }
  
  .wechat-image-grid.triple-image .wechat-image {
    flex: 1;
    height: 200rpx;
    border-radius: 8rpx;
    min-width: 0;
  }
  
  /* 四张图片 - 2x2网格 */
  .wechat-image-grid.quadruple-image {
    display: flex;
    flex-wrap: wrap;
    gap: 4rpx;
    width: 100%;
  }
  
  .wechat-image-grid.quadruple-image .wechat-image {
    width: calc(50% - 2rpx);
    height: 200rpx;
    border-radius: 8rpx;
  }
  
  /* 五张图片 - 特殊布局（第一行2张，第二行3张） */
  .wechat-image-grid.five-image {
    display: flex;
    flex-wrap: wrap;
    gap: 4rpx;
    width: 100%;
  }
  
  .wechat-image-grid.five-image .wechat-image:nth-child(1),
  .wechat-image-grid.five-image .wechat-image:nth-child(2) {
    width: calc(50% - 2rpx);
    height: 200rpx;
    border-radius: 8rpx;
  }
  
  .wechat-image-grid.five-image .wechat-image:nth-child(3),
  .wechat-image-grid.five-image .wechat-image:nth-child(4),
  .wechat-image-grid.five-image .wechat-image:nth-child(5) {
    width: calc(33.333% - 3rpx);
    height: 200rpx;
    border-radius: 8rpx;
  }
  
  /* 六张图片 - 2x3网格 */
  .wechat-image-grid.six-image {
    display: flex;
    flex-wrap: wrap;
    gap: 4rpx;
    width: 100%;
  }
  
  .wechat-image-grid.six-image .wechat-image {
    width: calc(33.333% - 3rpx);
    height: 200rpx;
    border-radius: 8rpx;
  }
  
  /* 七张图片 - 特殊布局（第一行3张，第二行2张，第三行2张） */
  .wechat-image-grid.seven-image {
    display: flex;
    flex-wrap: wrap;
    gap: 4rpx;
    width: 100%;
  }
  
  .wechat-image-grid.seven-image .wechat-image:nth-child(1),
  .wechat-image-grid.seven-image .wechat-image:nth-child(2),
  .wechat-image-grid.seven-image .wechat-image:nth-child(3) {
    width: calc(33.333% - 3rpx);
    height: 200rpx;
    border-radius: 8rpx;
  }
  
  .wechat-image-grid.seven-image .wechat-image:nth-child(4),
  .wechat-image-grid.seven-image .wechat-image:nth-child(5) {
    width: calc(50% - 2rpx);
    height: 200rpx;
    border-radius: 8rpx;
  }
  
  .wechat-image-grid.seven-image .wechat-image:nth-child(6),
  .wechat-image-grid.seven-image .wechat-image:nth-child(7) {
    width: calc(50% - 2rpx);
    height: 200rpx;
    border-radius: 8rpx;
  }
  
  /* 八张图片 - 特殊布局（第一行3张，第二行3张，第三行2张） */
  .wechat-image-grid.eight-image {
    display: flex;
    flex-wrap: wrap;
    gap: 4rpx;
    width: 100%;
  }
  
  .wechat-image-grid.eight-image .wechat-image:nth-child(1),
  .wechat-image-grid.eight-image .wechat-image:nth-child(2),
  .wechat-image-grid.eight-image .wechat-image:nth-child(3) {
    width: calc(33.333% - 3rpx);
    height: 200rpx;
    border-radius: 8rpx;
  }
  
  .wechat-image-grid.eight-image .wechat-image:nth-child(4),
  .wechat-image-grid.eight-image .wechat-image:nth-child(5),
  .wechat-image-grid.eight-image .wechat-image:nth-child(6) {
    width: calc(33.333% - 3rpx);
    height: 200rpx;
    border-radius: 8rpx;
  }
  
  .wechat-image-grid.eight-image .wechat-image:nth-child(7),
  .wechat-image-grid.eight-image .wechat-image:nth-child(8) {
    width: calc(50% - 2rpx);
    height: 200rpx;
    border-radius: 8rpx;
  }
  
  /* 九张图片 - 3x3网格 */
  .wechat-image-grid.nine-image {
    display: flex;
    flex-wrap: wrap;
    gap: 4rpx;
    width: 100%;
  }
  
  .wechat-image-grid.nine-image .wechat-image {
    width: calc(33.333% - 3rpx);
    height: 200rpx;
    border-radius: 8rpx;
  }
  
  /* 图片通用样式 */
  .wechat-image {
    object-fit: cover;
    background-color: #f5f5f5;
  }
  
}

/* 动态列表 */
.feed-section {
  padding: 0 17rpx 40rpx;
}
.post-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.post-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16rpx;
}

.user-info {
  display: flex;
  align-items: center;
}

.user-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  margin-right: 16rpx;
}

.cat-avatar {
  background: #f4c2a1;
}

.girl-avatar {
  background: linear-gradient(135deg, #ff9ec7, #ffb3d6);
}

.username {
  font-size: 28rpx;
  font-weight: 500;
  color: #333;
}

.post-date {
  font-size: 24rpx;
  color: #999;
}

.post-content {
  margin-bottom: 16rpx;
}

.post-content text {
  font-size: 28rpx;
  line-height: 1.5;
  color: #333;
}

/* 视频缩略图 */
.video-thumbnail {
  position: relative;
  border-radius: 12rpx;
  overflow: hidden;
  margin-bottom: 16rpx;
}

.thumbnail-image {
  width: 100%;
  height: 300rpx;
  background: linear-gradient(135deg, #8b4513, #d2691e);
  position: relative;
}

.video-characters {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx;
}

.character-1 {
  width: 80rpx;
  height: 120rpx;
  background: linear-gradient(135deg, #8b4513, #a0522d);
  border-radius: 8rpx;
  position: relative;
}

.character-2 {
  width: 80rpx;
  height: 120rpx;
  background: linear-gradient(135deg, #d2691e, #cd853f);
  border-radius: 8rpx;
  position: relative;
}

.video-title-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.video-title {
  color: #fff;
  font-size: 32rpx;
  font-weight: 600;
  text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.5);
  display: block;
  margin-bottom: 8rpx;
}

.video-subtitle {
  color: #fff;
  font-size: 24rpx;
  text-shadow: 1rpx 1rpx 2rpx rgba(0, 0, 0, 0.5);
}

.video-info {
  position: absolute;
  bottom: 20rpx;
  left: 20rpx;
  right: 20rpx;
}

.video-details {
  color: #fff;
  font-size: 20rpx;
  line-height: 1.4;
  text-shadow: 1rpx 1rpx 2rpx rgba(0, 0, 0, 0.5);
  display: block;
  margin-bottom: 8rpx;
}

.broadcast-info {
  color: #fff;
  font-size: 18rpx;
  text-shadow: 1rpx 1rpx 2rpx rgba(0, 0, 0, 0.5);
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80rpx;
  height: 80rpx;
  background: rgba(255, 107, 157, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.play-icon {
  color: #fff;
  font-size: 32rpx;
  font-weight: bold;
  margin-left: 4rpx;
}

/* 图片画廊 */
.image-gallery {
  margin-bottom: 16rpx;
}

.gallery-scroll {
  white-space: nowrap;
}

.gallery-items {
  display: flex;
  white-space: nowrap;
}

.gallery-item {
  display: inline-block;
  width: 200rpx;
  height: 200rpx;
  margin-right: 16rpx;
  border-radius: 12rpx;
  overflow: hidden;
}

.gallery-image {
  width: 100%;
  height: 100%;
}

.img1 {
  background: linear-gradient(135deg, #ff6b9d, #ff9ec7);
  position: relative;
}

.img2 {
  background: linear-gradient(135deg, #4fc3f7, #7dd3f2);
  position: relative;
}

.img3 {
  background: linear-gradient(135deg, #ffd54f, #fff176);
  position: relative;
}

.couple-image {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #8b4513, #a0522d);
  border-radius: 8rpx;
}

.movie-poster {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #333, #666);
  border-radius: 8rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16rpx;
}

.poster-title {
  color: #fff;
  font-size: 24rpx;
  font-weight: 600;
  text-align: center;
  margin-bottom: 8rpx;
}

.poster-subtitle {
  color: #ccc;
  font-size: 16rpx;
  text-align: center;
}

.man-portrait {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f4c4c4, #f7d1d1);
  border-radius: 8rpx;
}

/* 操作栏 */
.post-actions {
  display: flex;
  justify-content: flex-end;
  gap: 40rpx;
}

.action-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8rpx;
  cursor: pointer;
}

.action-icon {
  width: 32rpx;
  height: 32rpx;
}

.action-text {
  font-size: 24rpx;
  color: #666;
}

/* 第一个操作项特殊样式 */
.action-item:first-child {
  background: transparent;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  color: #666;
}

.action-item:first-child .action-icon {
  font-size: 20rpx;
  color: #ff6b9d;
}

.action-item:first-child .action-text {
  color: #333;
}

/* 使用原生 tabBar：移除自绘底部栏样式 */
.bottom-nav, .nav-item, .nav-icon, .nav-text, .post-center, .post-btn { display: none; }
</style>